<template>
    <div id="UserInfo">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>账户名称</td>
                    <td>{{UserInfo.accountName}}</td>
                </tr>
                <tr>
                    <td>描述</td>
                    <td>{{UserInfo.description}}</td>
                </tr>
                <tr>
                    <td>邮箱地址</td>
                    <td>{{UserInfo.emailAddress}}</td>
                </tr>
                <tr>
                    <td>昵称</td>
                    <td>{{UserInfo.nickName}}</td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>{{UserInfo.password}}</td>
                </tr>
                <tr>
                    <td>真名</td>
                    <td>{{UserInfo.realName}}</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <el-button type="primary">修改</el-button>
                        <el-button type="danger" @click="logout">退出</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data(){
        return {
            UserInfo: {}
        }
    },
    methods: {
        logout(){
            // 登出
            localStorage.clear();
            this.$router.push({name: 'login'})
        }
    },
    created(){
        var accountInfo = JSON.parse(localStorage.getItem("responseData"));
        this.UserInfo = accountInfo.account;
    }
}
</script>

<style lang="scss" scoped>
    #UserInfo {
        width: 100%;
        height: 100%;
        padding: 50px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        table {
            margin-top: 100px;
            width: 50%;
        }
    }
</style>
